import React, { Component } from "react";
import Taro from "@tarojs/taro";
import { AtButton, AtMessage } from "taro-ui";
import { View, Text } from "@tarojs/components";

import Topic from "./topic";
import "./index.less";

class Exam extends Component {
  constructor() {
    super(...arguments);
    this.state = {
      key: 0,
      ke1: 1,
      ke2: 2,
      ke3: 3,
      ke4: 4,
      arr: [],
      msg: "08:00",
      maxtime: 8 * 60,
      timer: ""
    };
  }
  // 可以使用所有的 React 生命周期方法
  componentDidMount() {
    let { maxtime, timer } = this.state;
    const countDown = () => {
      if (maxtime >= 0) {
        let minutes = Math.floor(maxtime / 60);
        let seconds = Math.floor(maxtime % 60);
        this.setState({
          msg:
            (minutes < 10 ? "0" + minutes : minutes) +
            ":" +
            (seconds < 10 ? "0" + seconds : seconds)
        });
        this.setState({ maxtime: --maxtime });
        if (maxtime == 2 * 60) {
          Taro.atMessage({
            message: "还有2分钟结束考试"
          });
        }
      } else {
        Taro.atMessage({
          message: "考试结束"
        });
        clearInterval(timer);
      }
    };
    timer = setInterval(countDown, 1000);
    timer;
  }

  // 对应 onLaunch
  onLaunch() {}

  // 对应 onShow
  componentDidShow() {}

  // 对应 onHide
  componentDidHide() {}
  // 返回
  goBack = () => {
    Taro.navigateBack();
  };
  getValue = () => {
    const json = {};
    Taro.getStorage({
      key: "value1",
      success: function(res) {
        json.one = JSON.parse(res.data);
      }
    });
    Taro.getStorage({
      key: "value2",
      success: function(res) {
        json.two = JSON.parse(res.data);
      }
    });
    Taro.getStorage({
      key: "value3",
      success: function(res) {
        json.three = JSON.parse(res.data);
      }
    });
    Taro.getStorage({
      key: "value4",
      success: function(res) {
        json.four = JSON.parse(res.data);
      }
    });
    Taro.getStorage({
      key: "value5",
      success: function(res) {
        json.five = JSON.parse(res.data);
      }
    });
    console.log(json);
  };
  clearValue = () => {
    Taro.removeStorage({
      key: "value1",
      success: function(res) {
        console.log(res);
      }
    });
    Taro.removeStorage({
      key: "value2",
      success: function(res) {
        console.log(res);
      }
    });
    Taro.removeStorage({
      key: "value3",
      success: function(res) {
        console.log(res);
      }
    });
    Taro.removeStorage({
      key: "value4",
      success: function(res) {
        console.log(res);
      }
    });
    Taro.removeStorage({
      key: "value5",
      success: function(res) {
        console.log(res);
      }
    });
  };
  submit = () => {
    this.getValue();
  };

  render() {
    // 在入口组件不会渲染任何内容，但我们可以在这里做类似于状态管理的事情
    return (
      <View className="topic">
        <View className="title">
          <Text
            onClick={this.goBack}
            className="at-icon at-icon-chevron-left color"
          ></Text>
          <Text className="con">考试</Text>
        </View>
        <Topic key1={this.state.key}></Topic>
        <Topic key1={this.state.ke1}></Topic>
        <Topic key1={this.state.ke2}></Topic>
        <Topic key1={this.state.ke3}></Topic>
        <Topic key1={this.state.ke4}></Topic>
        <View className="block"></View>
        <View className="foot">
          <AtButton className="btn" onClick={this.submit}>
            交卷
          </AtButton>
          <View className="clock">
            <AtMessage />
            <Text>倒计时：</Text>
            <Text>{this.state.msg}</Text>
          </View>
        </View>
      </View>
    );
  }
}

export default Exam;
